//计量单位
$unit: px;
//颜色
$color: #3f61f1;
$color_1: #409EFF;
$color_2: #E6A23C;
$color_3: #F56C6C;
$color_4: #67C23A;
$border_color: #e6e6e6;

.color {
  color: $color
}

.color_4 {
  color: $color_4
}

.iconBg_4 {
  background: $color_4 !important;
  border: none !important;
  color: #fff;
}

//距离
$c8: 8px;
$c12: 12px;
$c16: 16px;
$c18: 18px;
$c24: 24px;
$c32: 32px;
//投影
@mixin shadow {
  box-shadow: 0 10px 20px rgba(33, 39, 65, 0.08);
}

//投影
@mixin absoluteCenterLeft {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

@mixin absoluteCenterTop {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

@mixin flex {
  display: flex;
}

//初初始
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: inherit;
  color: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

h3 {
  font-weight: bold;
}

//
#app, #main, #mainCenter {
  height: 100%;
}

#main {
  font-size: 14px;
}

.fullBox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #f5f5f5;
}

//字体
@for $i from 1 to 5 {
  h#{$i} {
    font-size: #{22-2*$i}px;
    font-weight: bold;
    line-height: 1.68em;
  }
}

//循环
$length: 32;

@for $i from 0 to $length+1 {
  .m#{$i} {
    margin: #{$i}px !important;
  }
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .p#{$i} {
    padding: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .f#{$i} {
    font-size: #{$i}px !important;
  }
}


//列表
$spacing: 8px; //列表间距
.list {
  &:not(.noList) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: -$spacing;
    > * {
      margin-bottom: $spacing;
      margin-right: $spacing;
    }
    @for $i from 1 to 17 {
      &.list_#{$i} > * {
        width: calc((100% + #{$spacing}) / #{$i} - #{$spacing});

        &:nth-child(#{$i}n) {
          margin-right: 0;
        }
      }
    }

    > .autoFlex {
      flex: 1;
      margin-right: 0;
    }

    > .auto {
      width: 100%;
      margin-right: 0;
    }

    + .list {
      margin-top: #{$spacing};
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }
}
$cell: 10; //列表间距
.cell {

  > *:not(:last-child) {
    margin-right: $spacing;
  }

  @for $i from 1 to $cell+1 {
    > .cell_#{$i} {
      display: block;
      width: calc(((100% + #{$spacing}) / #{$cell} - #{$spacing}) * #{$i} + #{$spacing} * #{$i - 1});
    }
  }
}

//标签
.tag {
  border: 1px $border_color solid;
  display: inline-block;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 22px;
  box-sizing: border-box;

  &:not(.border) {
    border: none;
    background: $color;
    color: #fff;

    &.tag_1 {
      background: $color_1;
    }

    &.tag_2 {
      background: $color_2;
    }

    &.tag_3 {
      background: $color_3;
    }

    &.tag_4 {
      background: $color_4;
    }
  }
}

//描边
.border {
  border: 1px $border_color solid;
}

.border_bottom {
  border-bottom: 1px $border_color solid;
}

.border_left {
  border-left: 1px $border_color solid;
}

.border_top {
  border-top: 1px $border_color solid;
}

.border_right {
  border-right: 1px $border_color solid;
}

//投影
.shadow {
  @include shadow;
}

//对齐
.textCenter {
  text-align: center !important;
}

.textLeft {
  text-align: left !important;
}

.textRight {
  text-align: right !important;
}

//背景
.bg {
  background: $color;
  color: #fff;
}

//标题
.title {
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 44px;
  line-height: 44px;

  .title-describe {
    display: flex;
    -webkit-box-align: center;
    align-items: center;

    p {
      margin-left: 10px;
      font-size: 12px;
      color: #999aaa;
    }
  }

  &:not(.not) {
    padding: 0 16px;
  }

  .titleTag {
    position: relative;

    &:after {
      content: "";
      @include absoluteCenterTop;
      left: -16px;
      border-left: 3px $color solid;
      height: 16px;
      border-radius: 0 10px 10px 0;
    }
  }

  .d_navtab {
    display: flex;

    span {
      position: relative;

      &:not(last-child) {
        margin-right: 16px;
      }

      &:hover {
        color: $color;
      }

      &.active {
        font-weight: bold;

        &:after {
          content: "";
          position: absolute;
          z-index: 2;
          left: 0;
          right: 0;
          bottom: 0;
          border-bottom: 2px $color solid;
        }
      }
    }
  }
}

//flex浮动
.flex {
  @include flex;
}

.flexLc {
  @include flex;
  align-items: center; //上下居中
}

.flexLcc {
  @include flex;
  align-items: center; //上下居中
  justify-content: center; //左右居中
}

.flexLr {
  @include flex;
  align-items: center; //上下居中
  justify-content: space-between; //两端对齐
}

.flexY {
  @include flex;
  flex-direction: column; //上下Flex
}

.flexYc {
  @include flex;
  flex-direction: column; //上下Flex
}

.flexYcc {
  @include flex;
  flex-direction: column; //上下Flex
  justify-content: center; //左右居中
  align-items: center; //上下居中
}

@for $i from 1 to 11 {
  .flex_#{$i} {
    flex: #{$i};
  }
}

//旋转
.rotateY {
  transform: rotateY(180deg); /* 水平镜像翻转 */
}

.rotateX {
  transform: rotateX(180deg); /* 垂直镜像翻转 */
}

.rotate90 {
  transform: rotate(90deg);
  display: inline-block;
}

.rotate45 {
  transform: rotate(45deg);
  display: inline-block;
}

.rotate-90 {
  transform: rotate(-90deg);
  display: inline-block;
}

//
body, html {
  height: 100%;
}

.printBox{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  pointer-events: none;
  z-index: -9999999;
  background: #fff;
}

//框架
.case{
  width:100%;
  height:100%;
  overflow:hidden;
  display: flex;
  flex-direction: column;
}
.d_main {
  flex: 1;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  overflow: hidden;

  &.d_main_auto {
    overflow-y: auto;
    margin: -8px;
    padding: 8px;
    height: calc(100% + 16px);
  }

  &:not(.not) {
    background: #fff;
    //border: 1px #E6E6E6 solid;
  }

  & > *:first-child{
    &.title{
      margin: -16px -16px 16px;
    }
  }
}

//操作区
.d_operationBox {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px;
  &:not(.not) {
    // border-bottom: 1px #e6e6e6 solid;
  }

  .el-button {
    height: 32px;
    padding: 0;
  }

  .d_search {
    display: flex;
    align-items: center;
    >.el-input{
      width:320px;
      margin-left:8px;
    }
    .el-input__inner:focus {
      border-color: #3f61f1;
      box-shadow: 0 0 0 1px #f2f4ff inset;
    }

    .el-input-group__append {
      padding: 0;
      background: #3f61f1;
      color: #fff;
      width: 90px;
      position: relative;
      border: none;
      margin: 0;

      .el-button {
        width: 100%;
        margin: 0;
        border: none;
        height: 30px;
      }
    }
  }
}

//表格操作区域
.d_tableOperation {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8f9fb;
  border-left: 1px solid #E6E6E6;
  border-right: 1px solid #E6E6E6;
  border-top: 1px solid #E6E6E6;
  .d_condition {
    label {
      position: relative;

      .el-radio-button__inner {
        &:hover {
          color: #3f61f1;
        }
      }

      &.is-active {
        z-index: 2;

        .el-radio-button__inner {
          border-color: #3f61f1;
          color: #fff;
        }
      }
    }
  }

  .d_set {
    display: flex;
    align-items: center;
    position: relative;

    .d_icon {
      font-size: 16px;
      position: relative;
    }

    > *:not(:last-child):after {
      content: "|";
      margin: 0 12px;
      color: #ddd;
    }
  }
}

//内容区
.d_content {
  flex: 1;
  overflow: hidden;
  padding: 8px;

  &.not {
    overflow-y: auto;
  }

  > .el-form {
    height: 100%;
  }

  .d_content_left, .d_content_auto:not(.not) {
    border: 1px $border_color solid;
    background: #fff;
    border-radius: 4px;
    overflow-x: hidden;
  }

  .d_content_auto.not {
    flex: 1;
    display: flex;
  }

  .d_content_left {
    width: 300px;

    & + .d_content_auto {
      margin-left: 8px;
    }
  }

  .d_content_auto:not(.not) {
    flex: 1;
    display: flex;
    overflow: hidden;

    .left, .content {
      display: flex;
      flex-direction: column;

      > .title {
        border-bottom: 1px $border_color solid;
      }
    }

    .left {
      border-right: 1px $border_color solid;
      width: 260px;

      .d_orderList {
        ul {
          margin: 4px 0;

          li {
            padding: 8px;

            &.active {
              background: #f7f8fa;
            }

            .title {
              height: auto;
              line-height: 1.2em;
            }

            .tagBox {
              margin-top: 4px;
              display: flex;
              flex-wrap: wrap;

              span {
                display: block;
                background: $color;
                color: #fff;
                border-radius: 2px;
                padding: 6px 6px;
                font-size: 12px;

                &:not(:last-child) {
                  margin-right: 4px;
                }

                &.color_0 {
                  background: #d2d2d2;
                }

                &.color_2 {
                  background: #67c23a;
                }
              }
            }

            .text {
              margin-top: 8px;

              p {
                color: #999aaa;
                line-height: 24px;
              }
            }
          }
        }
      }

      .d_btn {
        border-top: 1px $border_color solid;
        padding: 6px;
        display: flex;

        .el-button {
          flex: 1;
          background: $color;
          border-color: $color;
          color: #fff;
        }
      }
    }

    .content {
      flex: 1;
      overflow: hidden;
    }
  }

  .orderForm {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}

.d_right {
  border-left: 1px $border_color solid;
  padding: 8px;
  width: 300px;
  overflow-x: hidden;
}

//订单明细
.d_orderDetails {
  margin: 16px;

  .item {
    &:not(:last-child) {
      margin-bottom: 8px;
    }

    .cTitle {
      margin-bottom: 8px;
    }

    dl {
      &:not(:last-child) {
        margin-bottom: 4px;
      }

      display: flex;
      line-height: 1.68em;
      overflow: hidden;

      dt {
        width: 96px;
        color: #999;
      }

      dd {
        flex: 1;
        overflow: hidden;
      }
    }

    .labelTree {
      .none {
        display: none;
      }

      .treeItem {
        width: 100%;
        line-height: 28px;
        color: #fff;
        padding: 0 10px;
        border-radius: 2px;
      }
    }
  }
}

//备注
.d_remark {
  line-height: 1.48em;
}

//单页头部
.d_header {
  display: flex;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  line-height: 32px;
  padding: 8px;
  border-bottom: 1px $border_color solid;
  @include shadow;
  background: #fff;

  .d_header_title {
    display: flex;
    align-items: center;

    .back {
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      background: #f5f5f5;
      border-radius: 4px;

      span {
        margin-right: 6px;
      }

      + h3 {
        margin-left: 10px;
      }

      &:hover {
        background-color: $color;
        color: #fff;
      }
    }
  }

  .d_header_btn {
    display: flex;

    > * {
      &:not(:last-child) {
        margin-right: 6px;
      }
    }
  }
}

//
.oh-y {
  overflow-y: auto;
}

//表格

//分页
.d_pag {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  // border-top: 1px #E6E6E6 solid;
  padding: 10px;
  border: 1px solid #E6E6E6;
  background-color: #fafafa;
  .pagination-container {
    padding: 0 !important;

    .el-pagination {
      padding: 0 !important;
      background-color: #fafafa;
    }
  }
}

//按钮
.d_btn {
  display: flex;

  > * {
    margin-left: 0 !important;
  }

  > *:not(:last-child) {
    margin-right: 6px;
  }
}

//框架
.d_container {
  flex: 1;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}

.topNav {
  width: 100%;
  z-index: 999;
  height: 52px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(100, 100, 100, 0.1);
  padding: 8px;
  border-bottom: 1px #e6e6e6 solid;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;

  .back {
    background: #f4f4f4;
    color: #333;
    height: 34px;
    display: inline-block;
    line-height: 34px;
    padding: 0 16px;
    border-radius: 4px;
    margin-right: 10px;

    &:hover {
      background: #3f61f1;
      color: #fff;
    }
  }

  .orderTopBtn {
    display: flex;

    .el-button--small {
      font-size: 14px;
    }
  }
}

.subTip {
  display: flex;
  padding: 10px;
  border-bottom: 1px #E6E6E6 solid;
  background: #fff;

  dl {
    line-height: 22px;
    display: flex;

    dt {
      position: relative;

      &:after {
        content: "：";
      }
    }

    dd {
      margin-left: 0;
    }

    &:not(:last-child) {
      margin-right: 16px;
    }
  }
}

.d_mainCenter {
  flex: 1;
  overflow: hidden;
  padding: 8px;

  .el-form-item__label, .el-form-item__content {
    line-height: 28px;
  }

  .el-form-item:not(:last-child) {
    margin-bottom: 8px;
  }

  .el-form-item__label {
    padding-left: 0;
  }

  .orderForm {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;

    .d_left {
      width: 280px;
      background: #fff;
      border: 1px #e6e6e6 solid;
      overflow-x: hidden;
      padding: 16px;
    }

    .d_tag {
      width: 460px;
      background: #fff;
      border: 1px #E6E6E6 solid;
      margin-left: 8px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      .tagCon {
        flex: 1;
        .tagList {
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
          border: 1px solid #e6e6e6;

          &:not(:last-child) {
            margin-bottom: 16px;
          }

          .listNav {
            position: relative;
            height: 38px;
            padding: 0 16px;
            background: #f5f6f9;
            border-bottom: 1px solid #e6e6e6;
            margin-bottom: -1px;

            .tagright {
              position: absolute;
              top: 50%;
              right: 16px;
              transform: translate(0, -50%);
            }
          }

          .tagShow {
            padding: 16px;

            h3 {
              margin: 10px 0;
              padding: 0;
              font-size: 14px;
            }
          }

          .el-form-item {
            margin-bottom: 0;
          }
        }
      }
      .d_tag_item{
        flex: 1;
        overflow-x: hidden;
        padding: 16px;
      }
    }

    .d_nav {
      &.d_nav_m {
        line-height: 38px;
      }

      display: flex;
      align-content: center;
      justify-content: center;
      border-bottom: 1px $border_color solid;

      span {
        position: relative;
        cursor: pointer;

        &:not(:last-child) {
          margin-right: 32px;
        }

        &:hover {
          color: $color;
        }

        &.on {
          font-weight: bold;
          color: $color;

          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: $color;
          }
        }
      }
    }

    .d_nav_item {

    }

    .d_content {
      margin-left: 8px;
      background: #fff;
      border: 1px #E6E6E6 solid;
      flex: 1;
      padding: 16px;
      overflow-x: hidden;
    }

    .colorPic {
      display: flex;

      .img_c {
        width: 300px;
        height: 300px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        background-color: #E6E6E6;
        position: relative;
        padding: 16px;
        margin-bottom: 16px;

        &:not(:last-child) {
          margin-right: 16px;
        }

        .img_i {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }

        .text {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
          background: #000000;
          padding: 2px 5px;
          border-radius: 0px 0px 4px 0px;
          opacity: 0.5;
        }

        .yulan, .delete {
          width: 24px;
          height: 24px;
          border-radius: 4px;
          position: absolute;
          right: 8px;
          z-index: 8;
          color: #fff;
          background: #7f7f7f;
          font-size: 14px;

          &:hover {
            background: #3f61f1;
            color: #fff;
          }
        }

        .yulan {
          bottom: 8px;
        }

        .delete {
          top: 8px;
        }
      }
    }

    .pic-uploader {
      margin-top: 16px;
    }
  }

  .tableBox {
    border: 1px #E6E6E6 solid;
    border-radius: 4px;
    overflow: hidden;

    .el-table--border {
      border: 1px solid #EBEEF5;
    }

    .el-table {
      margin-bottom: -1px;
    }
  }
}

.flex_auto {
  flex: 1;
}

.d_nrBox {
  flex: 1;
  overflow-x: hidden;
}

//标题
.cTitle {
  position: relative;
  line-height: 1;
  font-weight: bold;
  color: #333333ff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between; //两端对齐
  h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      left: -16px;
      top: 0;
      bottom: 0;
      border-left: 3px solid #3f61f1;
    }
  }

  &:not(:first-child) {
    margin-top: 16px;
  }
}

.leftCon {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  width: 350px;
  padding-bottom: 10px;
}

//
.dlText {
  dl {
    display: flex;

    dt {
      color: #999aaa;

      &:after {
        content: "：";
      }
    }

    dd {
    }
  }
}

//标签展示
.d-tagMore {
  flex: 1;

  .items {
    border: 1px #e6e6e6 solid;
    &:not(:last-child) {
      margin-bottom: 16px;
    }

    > .title {
      border-bottom: 1px #e6e6e6 solid;
      background: #f6f6f6;
      padding: 0 16px;
      line-height: 38px;
      margin-bottom: -1px;
      cursor: pointer;
    }

    .content {
      padding: 16px;

      .title {
        padding: 0;
        margin: 16px 0;

        h3 {
          font-size: 14px;
        }
      }

      ol {
        display: flex;
        margin-bottom: -16px;

        dl {
          display: flex;

          dt {
            color: #999aaa;

            &:after {
              content: "：";
            }
          }

          .spanList {
            display: flex;
            flex-wrap: wrap;

            span:not(:last-child):after {
              content: "/";
              color: #999aaa;
              margin: 0 4px;
            }
          }
        }
      }
    }
  }
}

//
.el-table {
  .el-table__fixed-right {
    .cell {
      width: 100%;

      > div {
        // flex: 1;
      }

      span {
        // display: block;
      }
    }
  }

  .el-icon-more {
    width: 100%;
    text-align: center;
  }
}

.unit {
  margin-left: 4px;
}

.workbenchBox {
  overflow-y: auto;
  height: 100%;
  dl {
    dt {
      font-size: 12px;
      color: #999aaa;
    }

    dd {
      margin-top: 8px;

      .number {
        display: flex;
        display: -webkit-flex;
        align-items: flex-end;

        * {
          line-height: 1;
        }

        h3 {
          font-size: 32px;
          font-family: "DIN Alternate";
        }
      }
    }
  }

  .title {
    margin-bottom: 10px;
  }

  .statisticsList {
    dl {
      background: #fff;
      padding: 24px;
      height: 100px;

      &:last-child {
        width: auto;
        margin-right: 0;
        flex: 1;
      }
    }
  }

  .guideBox {
    background: #fff;
    padding: 24px;
    display: flex;

    .items {
      flex: 1;

      &:not(:last-child) {
        margin-right: 16px;

      }

      &:last-child .tit:before {
        display: none;
      }

      .tit {
        position: relative;
        text-align: center;
        background: #F3F5FD;
        margin-bottom: 16px;

        &:after, &:before {
          content: "";
          position: absolute;
          top: 0;
          width: 0;
          height: 0;
          border-top: 22px solid transparent;
          border-bottom: 22px solid transparent;
          border-left: 22px solid #fff;
        }

        &:after {
          left: 0;
        }

        &:before {
          right: -22px;
          border-left-color: #F3F5FD;
          z-index: 3;
        }

        span {
          position: absolute;
          left: 32px;
          top: 50%;
          transform: translate(0, -50%);
          color: #3f61f1;
          font-family: "DIN Alternate";
          font-size: 26px;
          font-style: oblique;
        }

        h3 {
          line-height: 44px;
        }
      }

      ul {
        li {
          line-height: 28px;
          cursor: pointer;

          &:hover {
            color: #3f61f1;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

//弹窗样式
.pupMain {
  display: flex;
  height: 100%;
  overflow: hidden;

  .pupTree {
    width: 280px;
    border-right: 1px #E6E6E6 solid;
    overflow-x: hidden;
    padding: 16px;
  }

  .pupContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: -2px;
    overflow: hidden;

    .d_operationBox {
      height: 52px;
    }
  }
}

//表格
.tableCon {
  &:not(.not){
    overflow: hidden;
  }
  .el-table {
  }

  .dialogExpandTable {
    margin: 0 6px;
    border: 1px $border_color solid;

    > * {
      margin-bottom: -1px;
    }
  }
}

//
.d_mainFlex {
  flex: 1;
  height: 100%;
  display: flex;

  > * > .title {
    height: 44px;
    border-bottom: 1px #E6E6E6 solid;
  }

  .d_treeBox {
    width: 280px;
    border-right: 1px #E6E6E6 solid;
    background: #fff;
    display: flex;
    flex-direction: column;
    .d_nrBox {
      padding: 4px 0;
    }
  }
}

.treeList {
  ul {
    li {
      line-height: 38px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .iconfont {
        font-size: 22px;
        margin-right: 8px;
        color: #83a0ff;
      }

      p {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .btn {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 14px;
          display: none;
        }
      }

      .kuOP {
        margin-left: 8px;
      }

      &.on {
        background: #f2f5ff;
        color: $color;

        .iconfont {
          color: $color;
        }
      }

      &:hover {
        .iconfont {
          display: block;
          color: $color;
        }
      }
    }
  }
}

.areasOp {
  ul {
    padding: 4px 0;
  }
}

//任务看板
.taskBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 -16px -16px;
  .item {
    flex: 1;
  }

  .taskHead {
    display: flex;
    background: #f2f2f2;
    font-weight: bold;
    text-align: center;
    line-height: 36px;
    border-bottom: 1px $border_color solid;
  }

  .taskContent {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 8px;

    .item {
      display: flex;

      &:not(:last-child) {
        margin-right: 8px;
      }

      ul {
        flex: 1;
        background: #f2f2f2;
        padding: 8px;
        border-radius: 6px;
        overflow-x: hidden;

        li {
          cursor: pointer;
          position: relative;

          &.dred {
            .time {
              color: $color_3 !important;
            }
          }

          &.orgen {
            .time {
              color: $color_2 !important;
            }
          }

          &:not(:last-child) {
            margin-bottom: 8px;
          }

          &:hover {
            @include shadow;
            z-index: 2;
          }

          background: #fff;
          border-radius: 4px;
          padding: 16px;

          .tit {
            h3 {
              font-size: 20px;
              line-height: 1.2em;
            }
          }

          .nr {
            margin-top: 6px;

            dl {
              display: flex;
              line-height: 1.68em;

              dt {
                &:after {
                  content: "：";
                }
              }
            }
          }

          .time {
            display: flex;
            border-top: 1px #eee solid;
            padding-top: 16px;
            margin-top: 6px;
            color: #999aaa;

            .el-icon-time {
              margin-right: 4px;
            }

            span:not(:last-child):after {
              color: #ddd;
              margin: 0 4px;
              content: "|";
            }
          }
        }
      }
    }
  }
}

//权限
$muneW: 200;
.permissionBox {
  flex: 1;
  overflow: hidden;

  .wapper {
    background: #f2f2f2;
    display: flex;
    line-height: 44px;
    font-weight: bold;
    position: relative;
    margin-bottom: 10px;

    > * {
      padding: 0 10px;
      position: relative;

      &:not(:last-child):after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        height: 14px;
        border-right: 1px #ddd solid;
        transform: translate(0, -50%);
      }
    }

    .permission {
      width: #{$muneW+30}px;
    }

    .menus {
      flex: 1;
    }

    .other{
      width: 200px;
    }
  }

  .permissionList {
    flex: 1;
    overflow-x: hidden;
    padding: 0 10px 10px 0;
    .items {
      &:not(:last-child) {
        border-bottom: 1px #E6E6E6 solid;
        padding-bottom: 10px;
        margin-bottom: 10px;
      }
      .tit {
        padding: 10px;
        align-items: flex-start;
        justify-content: space-between;
        display: flex;
        &:hover {
          background: #f2f5ff;
        }
        .d_page{
          width:#{$muneW+30}px;
        }
        .d_function {
          flex: 1;
          overflow: hidden;
          margin-bottom: -8px;
          .el-checkbox{
            margin-bottom:8px;
          }
        }
      }
    }
  }
}

//
.el-button--small {
  min-width: 100px;
}


//业务状态
.d_orState {
  margin: 16px 0 8px;

  ul {
    display: flex;

    li {
      &:not(:last-child) {
        margin-right: 32px;
      }
    ;

      .item {
        display: flex;
        align-items: center;

        .iconfont {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px #ddd solid;
          border-radius: 100px;
          margin-right: 10px;

          &.OkIco {
            font-size: 20px;
          }
        }
      }

      dl {
        dt {
          font-weight: bold;
        }

        dd {
          font-size: 12px;
          margin-top: 6px;
          color: #999aaa;
        }
      }
    }
  }
}

.d_info {
  margin-top: 16px;
  background: #f2f2f2;
  border-radius: 4px;
  display: flex;
  padding: 8px 16px;

  dl {
    display: flex;

    &:not(:last-child) {
      margin-right: 16px;
    }

    dt {
      color: #999aaa;

      &:after {
        content: "：";
      }
    }

    dd {
    }
  }
}


//弹窗
.pupbox {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-form {
    flex: 1;
    overflow: hidden;
    display: flex;

    .el-form-item__label {
      line-height: 28px;
    }

    .el-form-item__content {
      line-height: 28px;
    }
  }

  .subTip {
    background: #fafafa;
  }

  .detail {
    ul + ul {
      margin-top: 8px;
    }
  }

  .permain {
    display: flex;

    .input {
      flex: 1;
      border: 1px #DCDFE6 solid;
      margin-right: -1px;
      border-radius: 4px 0 0 4px;

      & + .el-button {
        border-top-left-radius-radius: 0;
        border-bottom-left-radius-radius: 0;
        background: #f2f2f2;
      }
    }
  }
}

//彩稿
.coloredDrawing {
  ul {
    li {
      background: #f2f2f2;
      position: relative;
      height: 229px;
      overflow: hidden;

      .el-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .image-slot{
          p{
            font-size: 12px;
            color: #999aaa;
          }
        }
      }

      img {
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 90%;
      }

      .iconfont {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;

        &.yulanIco {
          right: 10px;
          bottom: 10px;
        }
      }
    }
  }
}

//
.el-button--text {
  color: #3f61f1;
  margin: 0;
  padding: 0;

  span {
    display: flex;
    align-items: center;

    .iconfont + * {
      margin-left: 4px;
    }
  }
}

//
.tableDiv {
  display: table;
  width: 100%;
  .table-caption {
    display: table-caption;
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  .table-column-group {
    display: table-column-group;
    &:not(.not){
      min-width: 76px;
    }
  }

  .table-column {
    display: table-column;
  }

  .table-row-group {
    display: table-row-group;
  }

  .table-row {
    display: table-row;
  }

  .table-row-group .table-row:hover, .table-footer-group .table-row:hover {
    background: #f6f6f6;
  }


  .table-header-group {
    display: table-header-group;
    background: #f8f9fb;
    font-weight: bold;
    line-height:28px;
  }

  .table-footer-group {
    display: table-footer-group;
  }
  ul{
    display:table-row;
    li{
      display: table-cell;
      padding: 5px;
      line-height: 28px;
      border-bottom: 1px #E6E6E6 solid;
    }
  }
  .sortable-ghost{
    z-index: 2;
    background: rgba(63, 97, 241, 0.10);
  }
}

//
.lableList{
  .lableList-item{
    border: 1px #E6E6E6 solid;
    &:not(:last-child){
      margin-bottom: 8px;
    }
  }
  .title{
    background: #f2f2f2;
    height: 38px;
    h3{
      font-size: 14px;
    }
  }
  .tagShow{
    border-top: 1px #E6E6E6 solid;
    padding: 16px;
    dl{
      display: flex;
      line-height: 22px;
      dt{
        width: 90px;
        color: #999aaa;
      }
      dd{
        flex: 1;
        overflow: hidden;
      }
    }
    .spanTag{
      display: flex;
      span{
        &:not(:last-child):after{
          content: "/";
          margin: 0 2px;
          color: #999aaa;
        }
      }
    }
  }
}

.lh22{
  line-height: 22px;
}


.item{
  &:not(:last-child){
    margin-bottom: 16px;
  }
  >*{
    &:not(:last-child){
      margin-bottom: 16px;
    }
  }
  .item-title{
    h3{
      margin-left: -16px;
      padding-left: 16px;
      position: relative;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform:translate(0,-50%);
        width: 3px;
        height: 16px;
        background:$color;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }
  .item-content{

  }
}
